<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/style.css">
  <link rel="icon" type="image/png" href="img/favicon.png">
  <title>Leon</title>
</head>
<body class="settingup">
	<main>
    <div id="feed">
      <p id="no-bubble" class="hide">
        You can start to interact with Leon, don't be shy.
      </p>
    </div>
    <div id="is-typing">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
    <div id="input-container">
      <div id="mic-container">
        <button></button>
        <div id="sonar"></div>
      </div>
      <label for="query"></label>
      <input type="text" id="query" autocomplete="off" autofocus>
      <small>
        Use <kbd>↑</kbd> <kbd>↓</kbd> to browse history;
        <kbd>↵</kbd> to submit;
        <kbd>alt + t to listen.</kbd>
      </small>
    </div>
	</main>
	<footer>
		<div id="logo"></div>
		<div id="version">
			<small>v</small>
		</div>
    <div id="logger">
      <small class="italic">
        <a href="https://docs.getleon.ai/collaborative-logger.html" target="_blank">Collaborative logger</a>
      </small>
    </div>
	</footer>
	<script src="vendor/socket.io/2.0.3/socket.io.js"></script>
	<script src="js/main.js"></script>
</body>
</html>
